<script setup>
import {onBeforeMount, ref} from "vue";
import {getArticlesByUserId} from "@/api/request.js";
import {useUserStore} from "@/store/user.js";
import ArticleItem from "@/components/articleItem.vue";
import {goBackToThePreviousPage} from "@/util/common.js";
import router from "@/router/index.js";

const store = useUserStore()
const articleContent = ref([])

onBeforeMount(async () => {
  await getArticlesByUserId({
    userId: store.userId
  }).then(res => {
    if (res.data !== null) {
      articleContent.value = res.data
    }
    console.log(articleContent.value)
  }).catch(err => {
    console.log(err)
  })
})
</script>

<template>
  <van-nav-bar fixed left-arrow title="我的文章" @click-left="goBackToThePreviousPage"/>

  <div class="app-container">
    <div v-if="articleContent.length === 0" class="empty-container">
      <van-empty description="暂无文章"/>
      <van-button size="small" type="primary" @click="router.push('/write')">写一篇</van-button>
    </div>

    <template v-for="item in articleContent">
      <ArticleItem :article="item.article" :knowledge-bases="item.knowledgeBases" :user="item.user"></ArticleItem>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  height: 100vh;
  overflow: auto;
  padding: 3.5rem 1rem 1rem;

  .empty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
</style>